<template>

  <div class="register">
    <div class="register_div">
      <div class="register_div_01">
        <div class="register_div_01_yan">
          <van-field v-model="text01"  readonly="readonly" label="用户职位"/>
          <!-- 输入任意文本 -->
          <van-field v-model="text"  placeholder="请填写用户昵称(2~4字中文)"/>
          <!-- 输入手机号，调起手机号键盘 -->
          <van-field v-model="tel" type="tel" required :error-message="telErrorMessage" placeholder="请填写账号(不含中文6~9位)" />
          <!-- 允许输入正整数，调起纯数字键盘 -->
          <van-field v-model="digit" type="digit"  required placeholder="请填写手机号" />
          <!-- 输入密码 -->
          <van-field v-model="password" :type="inputType" :error-message="passwordErrorMessage"
                     error required placeholder="请填写密码(大小写字母和数字结合 9~16位)" @focus="focus"></van-field>
          <button class="register_div_01_yan_jin" @click="getPassword" v-show="IfShow">
            <i class="el-icon-view"></i>
          </button>
          <van-field v-model="okPassword" :type="inputType" :error-message="okPasswordErrorMessage"
                     required placeholder="请确认密码" @focus="focus01" />
        </div>
        <el-row class="register_el-button">
          <el-button type="primary" round @click="gotoRegister" v-if="showBtn">注册</el-button>
        </el-row>
      </div>
      <div class="register_div_02">
        <div class="register_div_02_logo"></div>
      </div>
    </div>
  </div>

</template>

<script>
import {Message} from "element-ui";
export default {
  name: "GoRegister",
  data() {
    return {
      registerInfo: {
        text01: '',
        text: '',
        tel: '',
        digit: '',
        password: '',
      },
      tel: 'nie456456',
      text01: '',
      text: '小聂',
      digit: '15903497335',
      number: '',
      password: 'nie666888',
      okPassword: 'nie666888',
      telErrorMessage: '',
      passwordErrorMessage: '',
      okPasswordErrorMessage: '',
      inputType: 'password',
      IfShow: false,
      showBtn: true,
    };
  },
  created() {
    if (this.$route.params.value === '员工' || this.$route.params.value === '厂商'){
      this.text01 = this.$route.params.value +'-'+ this.$route.params.input;
    }else if (this.$route.params.value === '管理员') {
      this.text01 = '你等级不够，不能注册';
      this.showBtn = false;
    }else {
      this.text01 = '无效工牌，请返回填写身份';
      this.showBtn = false;
    }
  },
  methods: {
    getPassword() {
      let timer = null;
          clearTimeout(timer)
      if (this.inputType === 'password'){
        this.inputType = 'text';
        this.IfShow = false;
        timer = setTimeout(() => {
          this.inputType = 'password'
          this.IfShow = false;
        },3000)
      }else {
        return;
      }
    },
    focus() {
      this.IfShow = this.password !== '';
    },
    focus01() {
      this.IfShow = !(this.password === '' || this.okPassword === '');
    },
    gotoRegister(){
      // alert(12321);   // 表单验证
      if (this.text.trim() === null || this.text.trim() === '') {
        this.messageInfo('请填写用户名')
        return;
      }else {
        if (!(/[\u4e00-\u9a40]/.test(this.text))) {
          this.messageInfo('你妈给你取名字就瞎取《?》  "+this.text+" 人叫的？');
          return;
        }else if (this.text.length < 2 || this.text.length >= 4){
          this.messageInfo('名字能在短一点妈  ')
          return;
        }
      }
      // 账号
      if (this.tel === "" || this.tel === null){
        this.messageInfo('账号可以不填？');
        return;
      }else if (!(/^\w+$/.test(this.tel))) {
        this.messageInfo('这样的账号你能记住吗？   不要瞎敲了哥！')
        return;
      }else if(this.tel.length < 6 || this.tel.length > 9) {
        this.messageInfo('账号请输入6~9个字符')
        return;
      }
      // 电话号码
      if(this.digit.length !== 11){
        this.messageInfo('您输入的手机号格式不对')
        return;
      }
      // 密码
      if(this.password !== '') {
        if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.password)) || this.password.length < 9 || this.password.length > 16) {
          this.messageInfo('密码格式错误 密码只能由大小写字母和数字结合组成 字数不屑 比如:nie123')
          return;
        }else if (this.okPassword !== this.password){
          this.messageInfo('前后密码不一致，你是不是眼瞎！！么了你念不成')
          return;
        }else {
          // 填写完成  提示注册成功
          this.showBtn = false;  // 将注册按钮关闭\
          this.registerInfo.tel = this.tel;this.registerInfo.text = this.text;this.registerInfo.text01 = this.text01;
          this.registerInfo.digit = this.digit;this.registerInfo.password = this.password;
          this.$store.dispatch('Register', this.registerInfo).then(res => {
            this.$router.push({
              path: '/loginFirst'
            })
            this.messageInfo('注册成功')
          }, err => {
            this.messageInfo('注册失败')
            this.showBtn = true;})
        }
      }else {
        this.messageInfo('请填写密码！')
        return;
      }
    },
    messageInfo(info){
      Message.info({message: info,})
    }
  }
}
</script>

<style scoped>
.register {
  position: relative;
}
.register_div {
  position: absolute;
  width: 1125px;
  height: 637px;
/*  width: 80%;
  height: 90vh;*/
  left: 100px;
  top: 30px;
  background: url("../../assets/login/first/123011.jpg") no-repeat;
  /*color="#e4edf2"*/
}
.register_div_01 {
  position: absolute;
  width: 380px;
  height: 400px;
  left: 640px;
  top: 160px;
  background-color: #eaf3f8;
}
.register_div_02 {
  position: absolute;
  width: 120px;
  height: 50px;
  left: 260px;
  top: 180px;
  background-color: #e4edf2;
}
.register_div_02_logo {
  width: 115px;
  height: 60px;
  background: url("../../assets/login/first/123005.png");
  background-size: 100% 100%
}
.register_div_01_yan {
  position: absolute;
  top: 30px;
  left: 40px;
}
.register_div_01_yan_jin {
  position: absolute;
  bottom: 55px;
  right: 20px;
  font-size: 16px;
  line-height: 10px;
  border: none;
  background-color: azure;
}
.register_el-button {
  position: absolute;
  bottom: 50px;
  right: 35px;
}
</style>
